<template>
	<view class="container">
		<view class="header">
			<!-- 背景图 -->
			<image class="header_bg" src="https://community.chuangxiangdianli.com/images/me/me_bg.png" mode=""></image>
			<!--  设置 -->
			<view class="setting" @click="goSetting">
				<image src="https://community.chuangxiangdianli.com/images/me/me_setting.png" mode=""></image>
			</view>
			<!--  用户信息 -->
			<view class="user" @click="goEdit">
				<view class="avator">
					<image v-if="userInfo" :src="userInfo.avatarUrl" mode=""></image>
				</view>
				<view class="user_msg">
					<view class="name" v-if="userInfo">{{ userInfo.userInfo.nickname }}</view>
					<view class="user_phone" v-if="userInfo">{{ userInfo.userInfo.phone_str }}</view>
				</view>
				<view class="user_edit" @click.stop="goSetting">
					<image src="https://community.chuangxiangdianli.com/images/me/me_edit.png" mode=""></image>
					编辑
				</view>
			</view>
			<!-- 数据 -->
			<view class="num">
				<view class="num_item" @click="goCollect">
					<text>{{ UserStatistics.favorites }}</text>
					<view>收藏商品</view>
				</view>
				<view class="num_item" @click="goGn('integral')">
					<text>{{ UserStatistics.integral }}</text>
					<view>可用积分</view>
				</view>
				<view class="num_item">
					<text>{{ UserStatistics.login_day }}</text>
					<view>登陆天数</view>
				</view>
			</view>
			<!--  订单 -->
			<view class="order">
				<view class="allOrder" @click="goOrderList(-1)">
					<text>全部订单</text>
					<image src="https://community.chuangxiangdianli.com/images/home/likearrow.png" mode=""></image>
				</view>
				<view class="order_state">
					<view class="order_item" @click="goOrderList(1)">
						<image src="https://community.chuangxiangdianli.com/images/me/icon.png" mode=""></image>
						<view>待付款</view>
					</view>
					<view class="order_item" @click="goOrderList(2)">
						<image src="https://community.chuangxiangdianli.com/images/me/daifahuo.png" mode=""></image>
						<view>待发货</view>
					</view>
					<view class="order_item" @click="goOrderList(3)">
						<image src="https://community.chuangxiangdianli.com/images/me/daishouhuo.png" mode=""></image>
						<view>待收货</view>
					</view>
					<view class="order_item" @click="goOrderList(4)">
						<image src="https://community.chuangxiangdianli.com/images/me/wate_comment.png" mode=""></image>
						<view>待评价</view>
					</view>
					<!-- <view class="order_item" @click="goReturn">
						<image src="https://community.chuangxiangdianli.com/images/me/shouhou.png" mode=""></image>
						<view>退款/售后</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 功能 -->
		<view class="gn">
			<view class="gn_item" @click="goGn('integral')">
				<image class="gn_icon" src="https://community.chuangxiangdianli.com/images/me/me_money.png" mode=""></image>
				<view class="gn_name">积分钱包</view>
				<image class="gn_go" src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image>
			</view>
			<view class="gn_item" @click="goGn('message')">
				<image class="gn_icon" src="https://community.chuangxiangdianli.com/images/me/message.png" mode=""></image>
				<view class="gn_name">消息通知</view>
				<image class="gn_go" src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image>
			</view>
			<view class="gn_item" @click="goGn('comment')">
				<image class="gn_icon" src="https://community.chuangxiangdianli.com/images/me/comment.png" mode=""></image>
				<view class="gn_name">我的评价</view>
				<image class="gn_go" src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image>
			</view>
			<view class="gn_item" @click="goGn('feedback')">
				<image class="gn_icon" src="https://community.chuangxiangdianli.com/images/me/option.png" mode=""></image>
				<view class="gn_name">意见反馈</view>
				<image class="gn_go" src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image>
			</view>
			<view class="gn_item" @click="goAddress">
				<image class="gn_icon" src="https://community.chuangxiangdianli.com/images/me/address.png" mode=""></image>
				<view class="gn_name">地址管理</view>
				<image class="gn_go" src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image>
			</view>
			<view class="gn_item" @click="goInvite">
				<image class="gn_icon" src="https://community.chuangxiangdianli.com/images/me/invite.png" mode=""></image>
				<view class="gn_name">邀请码</view>
				<image class="gn_go" src="https://community.chuangxiangdianli.com/images/loginImg/you.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				userInfo: {}, // 用户信息
				UserStatistics: {}, // 登陆天数/可用积分/收藏商品数量
			}
		},
		onShow() {
			//  获取用户信息
			// uni.getStorage({
			// 	key: 'userInfo',
			// 	success: (res) => {
			// 		console.log('用户信息', res)
			// 	}
			// })
			this.userInfo = uni.getStorageSync('userInfo')
			this.getUserstatus()
			console.log('用户信息', this.userInfo)
			console.log(typeof this.userInfo)
		},
		methods:{
			//  用户数据
			getUserstatus() {
				let that = this
				that.$mrequest({
					url: 'Mini/statistics/UserStatistics',
					method: 'POST',
					callBack: function callBack (res) {
						console.log('数据请求成功', res)
						if (res.status) {
							that.UserStatistics = res.data
						}
					},
					fail: function fail (res) {
						console.log('数据请求失败！', res)
					}
				})
			},
			// 跳转订单列表页面
			goOrderList(num) {
				uni.navigateTo({
					url: `/order/orderList/index?num=${num}`
				})
			},
			//  跳转售后
			goReturn() {
				uni.navigateTo({
					url: '/order/return/returnList'
				})
			},
			//  跳转收藏商品
			goCollect() {
				uni.navigateTo({
					url: '/me/collect/index'
				})
			},
			// 跳转地址管理
			goAddress() {
				uni.navigateTo({
					url: '/me/address/address'
				})
			},
			// 跳转邀请码页面
			goInvite() {
				uni.navigateTo({
					url: '/other/invite/inviteQR'
				})
			},
			// 跳转功能页面
			goGn(str) {
				uni.navigateTo({
					url: `/me/${str}/index`,
				})
			},
			// 跳转设置页面
			goSetting() {
				console.log('设置')
				uni.navigateTo({
					url: '/me/setting/index'
				})
			},
			//  跳转用户编辑页面
			goEdit() {
				uni.navigateTo({
					url: '/me/setting/userInfo'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #FFFFFF;
	}
	.header{
		overflow: hidden;
		position: fixed;
		left: 0;
		top: 0;
		height: 637rpx;
		width: 100%;
		padding-top: var(--status-bar-height);
		z-index: 10;
		.header_bg{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 579rpx;
			z-index: -1;
		}
		.setting{
			
			height: 30rpx;
			&>image{
				display: block;
				height: 40rpx;
				width: 40rpx;
				margin-left: 43rpx;
				margin-top: 20rpx;
			}
		}
		.user{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			height: 110rpx;
			margin-top: 44rpx;
			margin-left: 40rpx;
			.avator{
				overflow: hidden;
				width: 110rpx;
				height: 100rpx;
				border-radius: 50%;
				&>image{
					display: block;
					height: 100%;
					width: 100%;
				}
			}
			.user_msg{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 100%;
				text-align: left;
				margin-left: 50rpx;
				.name{
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
				.user_phone{
					
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			.user_edit{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				width: 185rpx;
				height: 66rpx;
				background: rgba(0,0,0, .4);
				border-radius: 33rpx 0 0 33rpx;
				
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				&>image{
					display: block;
					margin-left: 26rpx;
					margin-right: 20rpx;
					width: 32rpx;
					height: 31rpx;
				}
			}
		}
		.num{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			height: 84rpx;
			width: 100%;
			margin: 30rpx 0 33rpx;
			.num_item{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				color: #FFFFFF;
				
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				&>text{
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
				
			}
		}
		.order{
			height: 202rpx;
			margin: 0 30rpx;
			padding: 18rpx 0 32rpx;
			background-color: #fff;
			box-shadow: 0px 0px 7rpx 0px rgba(164, 164, 164, 0.35);
			border-radius: 10rpx;
			.allOrder{
				height: 25rpx;
				text-align: right;
				font-size: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #34C39E;
				margin-bottom: 33rpx;
				&>image{
					display: inline-block;
					width: 19rpx;
					height: 21rpx;
					margin: 0 25rpx;
				}
			}
			.order_state{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				height: 94rpx;
				.order_item{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					&>image{
						display: block;
						width: 53rpx;
						height: 53rpx;
					}
				}
			}
		}
	}
	.gn{
		padding: 637rpx 30rpx 0;
		box-sizing: border-box;
		.gn_item{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: 123rpx;
			.gn_icon{
				display: block;
				height: 45rpx;
				width: 45rpx;
			}
			.gn_name{
				flex: 1;
				font-size: 30rpx;
				margin-left: 39rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.gn_go{
				display: block;
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>
